import { useIntersectionObserver } from '@vueuse/core'
import { toRefs, ref } from 'vue'
import { useStore } from 'vuex'

/* vuex - getters */
export const vuexGetters = () => toRefs(useStore().getters)

/* 数据懒加载 */
export const useLazyData = apiFn => {
  const target = ref(null) // 监听的 dom 节点
  const result = ref([]) // 存储后台数据

  // 开启检测懒加载
  const { stop } = useIntersectionObserver(
    target,
    // isIntersecting - 节点显示状态
    async ([{ isIntersecting }], observerElement) => {
      if (isIntersecting) {
        stop() // 停止检测
        // 开始获取数据
        result.value = await apiFn()
      }
    }
  )
  // 返回 -( dom节点 ，后台数据)
  return { target, result }
}
